<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <div>
            <FlightsFilters @filterEvent="getRenderData" :data="flightsData"></FlightsFilters>
        </div>
        <!-- 航班头部布局 -->
        <div>
          <FlightsListHed></FlightsListHed>
        </div>
        <!-- 航班信息 -->
        <div>
          <!-- 
                        flightsItem组件中的数据需要根据请求回来的数据进行渲染
                        因此我们需要吧item传递给flightsItem组件，然后flightsItem
                        组件就能根据数据进行动态渲染不同数据了
                        我们要把数据传递给flightsItem组件，那么要使用vue提供的
                        “父传子”技术，实现步骤如下：
                        1、在子(flightsItem)组件中,通过props属性什么一个变量来接收数据
                        2、父组件中在组件标签上把props声明的变量当成标签属性使用把数据传递给子组件
                     -->
          <FlightsItem
            :data="item"
            v-for="item in renderFlights"
            :key="item.id"
          ></FlightsItem>
          <!-- 分页器 -->
          <el-row type="flex" justify="center">
            <!-- 
                prev: 左箭头
                pager： 页码
                next: 右箭头
                total: 总数量
                插件默认每页展示10条数据 可以通过page-size属性值
             -->
            <el-pagination :page-size="pageSize" layout="prev, pager, next" 
            :total="flightsData.total"
            @current-change="currentChange">
            </el-pagination>
          </el-row>
        </div>
      </div>
      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 侧边栏组件 -->
        <FlightsAside></FlightsAside>
      </div>
    </el-row>
  </section>
</template>

<script>
import FlightsListHed from "@/components/air/flightsListHead.vue";
import FlightsItem from "@/components/air/flightsItem.vue";
import FlightsFilters from "@/components/air/flightsFilters.vue";
import  FlightsAside from "@/components/air/flightsAside.vue";
export default {
  components: { FlightsListHed, FlightsItem,FlightsFilters,
  FlightsAside },
  data() {
    return {
      flightsData: {
        // 所有的数据
        flights: [], // 航班列表
        info: {}, // 航班的基础信息
        options: {}, // 航班的公司信息
        total: 0, // 航班总数量
      },
      renderFlights: [], // 用于渲染的列表
      pageSize: 5, // 每页渲染的数量
      pageIndex: 1, // 渲染的页码(渲染第几页的数据)
      res: "", // 保存筛选的数据
    };
  },
  mounted() {
    this.getAirs();
  },
  watch:{
    // watch侦听器 是vue提供的一个属性，专门用于监听数据的变化 包括浏览器路径(路由)的变化
    /**
     * 在data、mounted等同级的位置上添加watch
     * watch: {
     *  '侦听的数据变量'(newVal, oldVal){
     *     newVal: 最新值
     *     oldVal：旧值    
     *  }
     * }
     * */ 
    "$route"(){
      // 监听路由变化 重新调用接口获取机票列表数据
      this.getAirs()
    }
  },
  methods: {
    // 获取机票列表数据
    getAirs() {
      // this.$route.query是vue-router插件提供的固定语法，用于获取url参数
      // console.log("获取浏览器地址栏上的参数：",this.$route.query);
      let query = this.$route.query;
      this.$axios({
        url: "/airs",
        params: {
          departCity: query.departCity,
          departCode: query.departCode,
          departDate: query.departDate,
          destCity: query.destCity,
          destCode: query.destCode,
        },
      }).then((res) => {
        console.log(57, res);
        this.flightsData = res.data;
        // console.log(this.flightsData);
        this.getRenderData();
      });
    },
    getRenderData(res,bool) {
      console.log("子组件传入的数据",res);
      this.res = res
      // 获取到切割数组开始和结束位置的下标值
      let start = (this.pageIndex - 1) * this.pageSize; // 开始位置的下标值
      let end = start + this.pageSize; // 结束位置的下标值
      if(bool){// 判断当筛选数据操作的时候，初始化页码值为1
        this.pageIndex = 1 
      }
      if(res){
        // 如果是子传父 res 才有数据
        this.renderFlights = res.slice(start, end);
        this.flightsData.total = res.length // 修改渲染的总数量
      }else{
        // 切割要渲染的数据
        this.renderFlights = this.flightsData.flights.slice(start, end);
      }
    },
    // 点击分页器查看数据
    currentChange(page){
        // 保存当前查看到页码
        this.pageIndex = page
        this.getRenderData(this.res)
    },
  },
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>